<template>
  <div class="classify">
    <nav-bar class="nav-bar">
      <template v-slot:center>
        <div>商品分类</div>
      </template>
    </nav-bar>
    <bscroll :probe-type="3" class="scroll11">
      <tab-menu :datalist="tabMenuItem" @itemClick="ListItemClick" />
    </bscroll>
    <bscroll :probe-type="3" ref="srcoll22" class="srcoll22">
      <div class="scrollhg">
        <tab-menu-classify :data="TabMenuData" />
        <tab-control :title="['综合', '新品', '销量']" @tabClick="tabClick" />
        <!-- <classify-goods :data="showCategoryDetail" /> -->
        <good-list :goods="showCategoryDetail"> </good-list>
      </div>
    </bscroll>
  </div>
</template>

<script>
import NavBar from "components/commen/navbar/NavBar.vue";
import TabMenu from "./childComps/TabMenu.vue";
import GoodList from "@/components/content/goods/GoodList";

// import Bscroll from "components/commen/bscroll/Bscroll";
import TabMenuClassify from "./childComps/TabMenuClassify.vue";
import TabControl from "components/content/tabControl/TabControl.vue";
import ClassifyGoods from "./childComps/ClassifyGoods.vue";
import {
  getCategory,
  getSubcategory,
  getCategoryDetail,
} from "network/category";
import { POP, SELL, NEW } from "commen/const";
import { tabControlMixin, bscroll } from "commen/mixin";
import Bscroll from "../../components/commen/bscroll/Bscroll.vue";

export default {
  components: {
    NavBar,
    Bscroll,
    TabMenu,
    TabMenuClassify,
    TabControl,
    ClassifyGoods,
    Bscroll,
    GoodList,
  },
  mixins: [tabControlMixin, bscroll],
  data() {
    return {
      tabMenuItem: [],
      MenuItemData: {},
      listItemIndex: -1,
      goodsData: {},
      TabControlIndex: "pop",
    };
  },
  computed: {
    TabMenuData() {
      if (this.listItemIndex === -1) return [];
      return this.MenuItemData[this.listItemIndex].itemData.list;
    },
    showCategoryDetail() {
      if (this.listItemIndex === -1) return [];
      return this.MenuItemData[this.listItemIndex].goodListsData[
        this.TabControlIndex
      ];
    },
  },
  created() {
    //拉取数据方法
    this.getData();
  },
  activated() {
    this.$refs.srcoll22.refresh();
  },
  methods: {
    //LIst点击切换
    ListItemClick(index) {
      //获取对应的数据
      this.getListData(index);
      console.log(this.getListData(index));
    },
    getData() {
      //tablist列表数据
      getCategory().then((res) => {
        const data = res.data.category;
        this.tabMenuItem = data.list;
        for (let i = 0; i < this.tabMenuItem.length; i++) {
          this.MenuItemData[i] = {
            //添加对象属性
            itemData: {},
            goodListsData: {
              pop: [],
              new: [],
              sell: [],
            },
          };
        }
        //页面初始化自动显示第一个List数据，所以先请求
        this.getListData(0);
      });
    },
    getListData(index) {
      //保存index的值
      this.listItemIndex = index;
      const mailKey = this.tabMenuItem[index].maitKey;
      getSubcategory(mailKey).then((res) => {
        this.MenuItemData[index].itemData = res.data;
        //  this.MenuItemData = {...this.MenuItemData}
        this.getGoodsData(POP);
        this.getGoodsData(NEW);
        this.getGoodsData(SELL);
      });
    },
    getGoodsData(type) {
      const nimiWallkey = this.tabMenuItem[this.listItemIndex].miniWallkey;
      //发送请求
      getCategoryDetail(nimiWallkey, type).then((res) => {
        this.MenuItemData[this.listItemIndex].goodListsData[type] = res;
        // this.MenuItemData = {...this.MenuItemData}
      });
    },
    tabClick(i) {
      switch (i) {
        case 0:
          this.TabControlIndex = "pop";
          break;
        case 1:
          this.TabControlIndex = "new";
          break;
        case 2:
          this.TabControlIndex = "sell";
          break;
        default:
          break;
      }
      console.log(
        this.MenuItemData[this.listItemIndex].goodListsData[
          this.TabControlIndex
        ]
      );
    },
  },
};
</script>

<style scoped>
.nav-bar {
  background-color: #ff919c;
  text-align: center;
  color: #fff;
  font-size: 18px;
  position: sticky;
  top: 0;
  z-index: 9999;
}
.scrollhg {
  /* padding: 0 0 49px; */
  position: relative;
  top: 0;
  left: 25%;
  right: 0;
  width: 75%;
}
.srcoll22 {
  margin-left: 94px;
}
</style>